<template>
    <div>
        <div class="list-content">
            <div class="list-header">
                <div class="header-top">
                    <el-checkbox 
                        v-model="isSelectMode"
                        @change="toggleSelectMode"
                    >批量操作</el-checkbox>
                    <div class="batch-actions" v-if="isSelectMode">
                        <el-button 
                            type="danger" 
                            size="small"
                            :disabled="!hasSelectedNotes"
                            @click="handleBatchDelete"
                        >
                            <el-icon><Delete /></el-icon>
                            批量删除 ({{ selectedCount }})
                        </el-button>
                        <el-button 
                            size="small"
                            @click="cancelSelect"
                        >取消</el-button>
                    </div>
                </div>
            </div>
            
            <el-empty v-if="!notes || notes.length === 0" description="暂无笔记" />
            <template v-else>
                <div 
                    v-for="note in notes" 
                    :key="note.noteId"
                    class="noteItem"
                    :class="{ active: currentNoteId === note.noteId }"
                    @contextmenu.prevent="showContextMenu($event, note)"
                    @click="handleSelect(note)"
                >
                    <el-checkbox 
                        v-if="isSelectMode"
                        v-model="selectedNotes[note.noteId]"
                        @click.stop
                    />
                    <div 
                        class="note-content"
                    >
                        <div class="noteHeader">
                            <h3 class="noteTitle">{{ note.noteTitle }}</h3>
                            <span class="noteDate">{{ formatDate(note.updateTime) }}</span>
                        </div>
                        <p class="notePreview">{{ getPreview(note.noteContent) }}</p>
                    </div>
                </div>
            </template>
        </div>
        <el-dropdown 
            v-model="showMenu"
            trigger="contextmenu"
            :teleported="true"
            @command="handleCommand"
        >
            <span class="dropdown-trigger"></span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="delete">
                        <el-icon><Delete /></el-icon>删除
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import type { Note } from '@/store/modules/note/noteStore';

const props = defineProps<{
    notes: Note[];
    currentNoteId: number;
}>();

const emit = defineEmits<{
    select: [note: Note];
    delete: [note: Note];
    batchDelete: [notes: Note[]];
}>();

// 状态管理
const showMenu = ref(false);
const selectedNote = ref<Note | null>(null);
const isSelectMode = ref(false);
const selectedNotes = ref<{ [key: string]: boolean }>({});

// 计算属性
const selectedCount = computed(() => {
    return Object.values(selectedNotes.value).filter(Boolean).length;
});

const hasSelectedNotes = computed(() => selectedCount.value > 0);

// 右键菜单相关方法
const showContextMenu = (event: MouseEvent, note: Note) => {
    event.preventDefault();
    selectedNote.value = note;
    showMenu.value = true;
};

const handleCommand = (command: string) => {
    if (command === 'delete' && selectedNote.value) {
        emit('delete', selectedNote.value);
    }
    showMenu.value = false;
};

// 批量删除相关方法
const toggleSelectMode = () => {
    isSelectMode.value = !isSelectMode.value;
    selectedNotes.value = {};
};

const handleBatchDelete = () => {
    const selectedNotesList = props.notes.filter(note => selectedNotes.value[note.noteId]);
    emit('batchDelete', selectedNotesList);
    cancelSelect();
};

const cancelSelect = () => {
    isSelectMode.value = false;
    selectedNotes.value = {};
};

// 其他辅助方法
const handleSelect = (note: Note) => {
    if (!isSelectMode.value) {
        emit('select', note);
    }
};

const formatDate = (date: string | Date | null) => {
    if (!date) return '';
    const d = new Date(date);
    return d.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    });
};

const getPreview = (content: string) => {
    if (!content) return '';
    return content.substring(0, 100) + (content.length > 100 ? '...' : '');
};

defineExpose({
    getSelectedNotes: () => props.notes.filter(note => selectedNotes.value[note.noteId])
});
</script>

<style scoped>
.noteList {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* position: relative; */
    /* background-color: #fff; */
}

.noteItem {
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.noteItem:hover {
    background-color: #f5f7fa;
}

.noteItem.active {
    background-color: #ecf5ff;
}

.noteHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.noteTitle {
    font-size: 16px;
    margin: 0;
    color: #333;
}

.noteDate {
    font-size: 12px;
    color: #999;
}

.notePreview {
    font-size: 14px;
    color: #666;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
}

.list-header {
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
    /* background-color: #fff; */
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.batch-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.batch-actions .el-button {
    display: flex;
    align-items: center;
    gap: 4px;
}

.note-content {
    flex: 1;
    min-width: 0;
}

:deep(.el-checkbox__input) {
    vertical-align: middle;
}

:deep(.el-checkbox__label) {
    font-size: 14px;
    color: #606266;
}

.list-content {
    width: 100%;
    flex: 1;
    overflow-y: auto;
}

.dropdown-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
</style>
